/* pages/home/home.wxss */
// @import "../../font.scss";
.sb {
  border: 2px solid red;
}
page {
  overflow: hidden;
  z-index: -2;
}
.bg{
  width: 100%;
  height: 100%;
  position:fixed;
  z-index: -1;
  filter: blur(3rpx);
}

.side {
  //w355
  width: 0;
  height: 100vh;
  float: left;
  position: relative;
}
.side .msg-box {
  width: 480rpx;
  margin-top: 140rpx;
}
.side .msg-box .tree {
  position: relative;
  left: 40rpx;
  margin-top: 30rpx;
  font-size: 75rpx;
  font-family: 'Ma Shan Zheng',cursive;
  letter-spacing: 5rpx;
  color: #fff;
}
.side .msg-box .tree.fz-s {
  font-size: 55rpx;
}
.menu {
  width: 375rpx;
  height: 100vh;
  position: relative;
  float: right;
}
.navBar {
  height: 100rpx;
  margin-top: 50rpx;
}
.plant-icon {
  width: 90rpx;
  height: 90rpx;
  float: right;
  margin-right: 60rpx;
  background-color: teal;
  border-radius: 50%;
  border: 20rpx solid #fff;
}
.plant-icon:active {
  border: 20rpx solid rgb(84, 196, 224);
}

.buttons {
  height: 65vh;
  position: absolute;
  bottom: 100rpx;
}

.button {
  width: 55vw;
  height: 12vh;
  background-image: linear-gradient(to bottom right, #30435b90, #467f7e20);
  position: relative;
  right: 30rpx;
  margin-top: 40rpx;
  border-top-left-radius: 80rpx;
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 10rpx;
  border-top-right-radius: 10rpx;
  border: 3px solid #00000050;
  line-height: 12vh;
  font-size: 4vh;
  color: #fff;
  font-family: 'Ma Shan Zheng',cursive;
  letter-spacing: 3rpx;
}
.title {
  margin-left: 65rpx;
}
.button {
  animation: shake 8s ease-in-out 2s infinite alternate;
}
.button-upload {
  right: -15rpx;
  animation: shake 8s ease-in-out 2.5s infinite alternate;
}
.button-policy {
  right: -30rpx;
}
.button-mine {
  right: -50rpx;
  animation: shake 8s ease-in-out 1s infinite alternate;
}

.button:active {
  background-image: linear-gradient(90deg, #355c7d 0%, #6c5b7b 50%, #c06c84 100%);
  right: 40rpx;
}
@keyframes disappear {
  from {color:#fff;}
  to {color: #000;}
}
@keyframes shake {
  0%,
  100% {
    transform: translate(-5px, -2px) rotate(6deg);
  }
  25% {
    transform: translate(5px, 2px) rotate(-1deg);
  }
  50% {
    transform: translate(10px, 5px) rotate(-3deg);
  }
}